<template>
    <el-dialog title="皮肤中心" :visible.sync="skinVisible" :before-close="handleClose">
        <ul class="skin-panel">
            <li v-for="skin in skinArray" :key="skin.skinId" @click="checkedSkin(skin.skinId)" @mouseenter="enterSkin(skin.skinId)" @mouseleave="leaveSkin(skin.skinId)">
                <span class="back-bar" v-show="skin.visible">使用</span>
                <span class="back-bar-try" v-show="showSkinId === skin.skinId">试用</span>
                <span class="back-bar-recent" v-show="skin.recent">NEW</span>
                <!--<span class="shin-checked" v-show="skin.visible"><i class="el-icon-cxl el-icon-cxl-dui"></i></span>-->
                <img :src="skin.path"/>
            </li>
        </ul>
    </el-dialog>
</template>

<script>

    import {baseUtil} from '@/util/BaseUtil';

    export default {
        name: "el-login-skin",
        props : {
            skinVisible : {
                type : Boolean,
                default : true
            },
            skin : {
                type: Object,
                default: {
                    skinId: 4,
                    path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_01.png',
                    url: "url('https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_01.png')",
                    visible : true
                },
            }
        },
        data() {
            return {
                baseUtil : baseUtil,
                oSkin : this.skin,
                skinArray : [
                    {skinId: 1, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_01.png', visible : false},
                    {skinId: 2, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_02.png', visible : false},
                    {skinId: 3, isLoad : false, recent : false, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_03.jpg', visible : false},
                    {skinId: 4, isLoad : false, recent : false, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 5, isLoad : false, recent : false, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 6, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 7, isLoad : false, recent : false, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 8, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 9, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 10, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 11, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},
                    {skinId: 12, isLoad : false, recent : true, path : 'https://chenxueli.oss-cn-hangzhou.aliyuncs.com/skin/skin_04.jpg', visible : false},

                ],
                skinMap : [],
                // 当前显示的id
                showSkinId : 0,
            }
        },
        methods: {
            // 关闭事件
            handleClose(){
                this.$emit('overSkin', {});
            },
            // 获取皮肤列表信息
            getSkinList() {
                console.log("获取登录页背景");
            },
            // 显示图片列表信息

            // 移动到上方的事件
            enterSkin(skinId) {
                let _this = this;
                // console.log(skinId, "移入");
                this.showSkinId = skinId;
                let skin = this.skinMap[skinId];
                this.$emit('changeSkin', this.skinMap[skinId]);
            },
            leaveSkin(skinId) {
                // console.log(skinId, "移出");
                this.showSkinId = this.oSkin.skinId;
                this.$emit('changeSkin', this.oSkin);
            },
            // 点击事件
            checkedSkin(skinId) {
                // console.log(skinId, "点击");
                this.scanSkin(skinId);
                this.oSkin = this.skinMap[skinId];
                this.$cookies.set("redefine_skin", this.oSkin, 60 * 60 * 24 * 30);
                this.$message.success('保存成功');
                this.handleClose();
            },
            scanSkin(skinId) {
                let skinMap = {};
                for(let i = 0; i < this.skinArray.length; i++) {
                    let skin = this.skinArray[i];
                    skin.visible = skinId === skin.skinId;
                    skin['url'] = "url('" + skin.path + "')";
                    skinMap[skin.skinId] = skin;
                }
                this.skinMap = skinMap;
            },
            // 将图片转成base64
            getBase64Image(image) {
                // 创建画板
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                return canvas.toDataURL('image/png');
            }
        },
        created() {
            this.scanSkin(this.skin.skinId);
        },
        mounted() {
            this.getSkinList();
        }
    }
</script>

<style lang="scss" scoped>

    ul.skin-panel{
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            display: inline-block;
            width: 180px;
            height: 100px;
            margin: 5px;
            padding: 5px;
            overflow: hidden;
            /*border: 1px black solid;*/
            border-radius: 4px;
            align-items: center;
            vertical-align: middle;
            position: relative;

            .back-bar,.back-bar-try,.back-bar-recent{
                display: block;
                position: absolute;
                padding: 0;
                margin: 0;
                top: 7px;
                right: -33px;
                z-index: 998;
                width: 100px;
                height: 20px;
                background-color: #13ce66;
                transform:rotate(45deg);
                -ms-transform:rotate(45deg); 	/* IE 9 */
                -moz-transform:rotate(45deg); 	/* Firefox */
                -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
                -o-transform:rotate(45deg); 	/* Opera */
                color: white;
                font-family: 黑体,serif;
                line-height: 20px;
                font-size: 14px;

                transition: opacity 0.5s
            }

            .back-bar-try{
                background-color: #08b6ce;
                z-index: 997;
            }

            .back-bar-recent{
                background-color: #ce4196;
                z-index: 997;
                left: -33px;
                transform:rotate(-45deg);
                -ms-transform:rotate(-45deg); 	/* IE 9 */
                -moz-transform:rotate(-45deg); 	/* Firefox */
                -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
                -o-transform:rotate(-45deg); 	/* Opera */
            }

            /*.shin-checked{*/
                /*position: absolute;*/
                /*top: 0;*/
                /*right: 0;*/
                /*z-index: 999;*/

                /*i{*/
                    /*color: white;*/
                /*}*/
            /*}*/

            img {
                position: absolute;
                top: -2px;
                left: -5px;
                width: 200px;
                /*max-height: 120px;*/
                cursor: pointer;

                transition: width 1s,height 1s,top 1s,left 1s;

                &:hover{
                    top: -5px;
                    left: -10px;
                    width: 220px;
                }
            }
        }
    }

</style>
